<template>
  <view class="login-page">
    <!-- 欢迎语 -->
    <view class="welcome">
      <text class="title">Hello!</text>
      <text class="subtitle">欢迎使用AI模拟面试小程序</text>
    </view>
    <view class="login-container">
      <!-- 登录方式 tabs -->
      <view class="tab-group">
        <view
          :class="['tab-item', { active: true }]"
        >
          手机号快捷登录
        </view>
      </view>

      <!-- 手机号登录表单 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">手机号</text>
          <input
            v-model="phone"
            class="input"
            type="number"
            placeholder="请输入11位手机号"
            maxlength="11"
          />
          <text class="error" v-if="phoneError">{{ phoneError }}</text>
        </view>
        <view class="form-item">
          <text class="label">密码</text>
          <input
            v-model="password"
            class="input"
            type="password"
            placeholder="请输入密码"
          />
          <text class="error" v-if="passwordError">{{ passwordError }}</text>
        </view>
      </view>

      <button class="login-btn" @click="handleLogin">登录</button>
    </view>

     <view class="extra-buttons">
      <button class="extra-btn" @click="goToRegister">新用户注册</button>
      <button class="extra-btn" @click="goToForgetPassword">忘记密码</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed ,getCurrentInstance} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useAppInfoStore } from "@/stores/appInfo";
import { LOCAL_STORAGE_KEY } from "@/utils/Constants.js";
import md5 from 'md5';
const { proxy } = getCurrentInstance();
const appInfoStore = useAppInfoStore();

// 测试账号数据
const testAccounts = [
  { phone: '13800138000', password: '123456' },
  { phone: '13900139000', password: 'abcdef' },
  { phone: '15801580158', password: 'password' }
]

// 响应式数据
const phone = ref('')
const password = ref('')
const phoneError = ref('')
const passwordError = ref('')

// 验证手机号格式
const validatePhone = () => {
  if (!phone.value) {
    phoneError.value = '请输入手机号'
    return false
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    phoneError.value = '请输入正确手机号格式'
    return false
  }
  phoneError.value = ''
  return true
}

// 验证密码
const validatePassword = () => {
  if (!password.value) {
    passwordError.value = '请输入密码'
    return false
  }
  passwordError.value = ''
  return true
}

// 修改后的handleLogin方法
const handleLogin = async() => {
  const isPhoneValid = validatePhone()
  const isPasswordValid = validatePassword()

  if (!isPhoneValid || !isPasswordValid) return

  try {
    const result = await proxy.Request({
      url: '/user/login',  // 修改为正确的登录接口路径
      method: 'POST',
      data: {
        phone: phone.value,
        password: password.value
        //password: md5(password.value)
      },
      showLoading: true
    });

    if(!result){
      return;
    }

    // 根据后端返回数据结构调整
    const token = result.token || result.data?.token || result;
    if (!token) {
      proxy.Message.error("登录失败，请重试");
      return;
    }

    uni.setStorageSync(LOCAL_STORAGE_KEY.token.key, token);
    proxy.Message.success("登录成功");
    uni.switchTab({ url: "/pages/home/HomeIndex" });

  } catch (error) {
    // 更友好的错误提示
    if (error.message.includes('账号或者密码错误')) {
      proxy.Message.error("账号或密码错误");
    } else {
      proxy.Message.error("登录失败：" + error.message);
    }
  }
}

// 页面加载时检查是否已登录
onLoad(() => {
  const token = uni.getStorageSync('token')
  if (token) {
    uni.reLaunch({
      url: '/pages/home/HomeIndex'
    })
  }
})


const goToRegister = () => {
  uni.navigateTo({
    url: '/pages/register/register'
  })
}

const goToForgetPassword = () => {
  uni.navigateTo({
    url: '/pages/forgetPassword/forgetPassword'
  })
}
</script>

<style scoped>
.login-page {
  padding: 20px;
  background: linear-gradient(to bottom, #eaf6ff, #fff);
  min-height: 100vh;
  box-sizing: border-box;
}

.welcome {
  margin-top: 50px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
}
.welcome .title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}
.welcome .subtitle {
  font-size: 20px;
  color: #1276ff;
}

/* 包含登录方式和表单的容器 */
.login-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 登录方式 tabs 样式 */
.tab-group {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 15px;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #333;
}
.tab-item.active {
  color: #1276ff;
  border-bottom: 2px solid #1276ff;
}

.form-section {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.error {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #f56c6c;
}

.login-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #1276ff;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 25px;
  border: none;
}

.login-btn:active {
  opacity: 0.8;
}

.extra-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.extra-btn {
  width: 48%;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  color: #1276ff;
  border: 1px solid #1276ff;
  border-radius: 4px;
  font-size: 14px;
}
</style>